<script setup defer async lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { formatDate,convertNumbers } from '@/utils/utils'
import { withdrawalRecord } from '@/api/user'
import { useSwipeHandlers } from '@/utils/useSwipeHandlers'

const { t } = useI18n()

const country=ref(1);
	const exchangeRate=ref(1);
	const symbol = ref('$')
interface DataItem {
  value: number
  status: number
  remark: string
  amount: number
  CreatedAt: string
  valueFee: number
}


const chineseToEnglishMap: { [key: string]: string } = {
  '-': 'Payment Platform - Proxy Payment Failed',
  
}


const translateToEnglish = (chineseText: string): string => {
  
  return chineseToEnglishMap[chineseText] || chineseText 
}

const baseData = reactive({
  condition: [0, 0],
  loading: false,
  page: 1,
  total: 0,
  typesList: ['All types', 'Applying', 'Rejected', 'Already arrived', 'fail', 'fail'],
  timeList: ['All time', 'Today', 'Yesterday', 'In the past seven days'],
  dataList: [] as DataItem[],
  aircraftUrl: uni.getStorageSync('aircraftUrl'),
  isContinueGetList: true,
})

const uDropdownRef = ref<any>(null)

const getList = async () => {
  if (!baseData.isContinueGetList) return
  baseData.loading = true
  uni.showLoading({
    title: t('Loading'),
    icon: 'none',
  })
  let params: any = {
    page: baseData.page,
    change_type: baseData.condition[0],
    time_types: baseData.condition[1],
    pageSize: 20,
  }
  
  try {
    const res = await withdrawalRecord(params)
    if (res.code === 0) {
      baseData.total = res.data.total
      if (res.data.list.length > 0) {
        baseData.dataList = baseData.dataList.concat(res.data.list)
        baseData.page++
      }
      if (baseData.total <= (baseData.page - 1) * params.pageSize) {
        baseData.isContinueGetList = false
      }
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none',
      })
    }
  } catch (error) {
    console.error( error)
    uni.showToast({
      title: 'error',
      icon: 'none',
    })
  } finally {
    baseData.loading = false
    uni.hideLoading()
  }
}

const changTypes = (index: number) => {
  uDropdownRef.value?.close()
  baseData.page = 1
  baseData.dataList = []
  baseData.condition[0] = index
  baseData.isContinueGetList = true
  getList()
}

const changTime = (index: any) => {
  uDropdownRef.value?.close()
  baseData.condition[1] = index
  baseData.page = 1
  baseData.dataList = []
  baseData.isContinueGetList = true
  getList()
}

const handleScroll = () => {
  getList()
}

const leftClick = () => {
  const pages = getCurrentPages()
  if (pages.length <= 1) {
    history.back()
  } else {
    uni.navigateBack()
  }
}


const getStatusText = (status: number) => {
  const statusMap: { [key: number]: string } = {
    1: 'Pending Review',
    2: 'Rejected',
    3: 'In Payment Process',
    4: 'Payment Successful',
    5: 'Failed',
    6: 'Payment Retry',
  }

  return statusMap[status] || 'Unknown state' 
}


const handleSwipeRight = () => {
  const pages = getCurrentPages()
  if (pages.length <= 1) {
    history.back()
  } else {
    uni.navigateBack()
  }
}

useSwipeHandlers(handleSwipeRight)

onMounted(() => {
  
  uni.setNavigationBarTitle({
    title: 'Ttask!' + t('Earn money so easy') + '!', 
  })
  symbol.value = uni.getStorageSync('symbol') || '₹'; 
  		country.value=uni.getStorageSync('country') || 1;
  		exchangeRate.value=uni.getStorageSync('exchangeRate') || 1;
  getList()
})
</script>

<template>
  <view class="withdrawal-container">
    <!--  -->
    <view class="bg-decoration">
      <view class="circle circle-1"></view>
      <view class="circle circle-2"></view>
      <view class="circle circle-3"></view>
      <view class="floating-shape shape-1">💳</view>
      <view class="floating-shape shape-2">💰</view>
      <view class="floating-shape shape-3">📋</view>
    </view>

    
    <up-navbar :title="t('Withdrawal details')" @leftClick="leftClick" :autoBack="false">
      <template #left>
        <view class="nav-back-btn">
          <image class="back-icon" src="../../../static/img/left.png"></image>
        </view>
      </template>
    </up-navbar>

    

    <view class="conditions">
      <up-dropdown ref="uDropdownRef" active-color="#667eea" title-size="0.8rem" menu-icon="arrow-down-fill">
        <up-dropdown-item :title="t(baseData.typesList[baseData.condition[0]])">
          <view class="slot-content">
            <view class="up-text-center up-content-color up-m-t-20 up-m-b-20" style="background: #fff; padding: 0.4rem">
              <view
                v-for="(item, index) in baseData.typesList"
                :class="baseData.condition[0] == index ? 'citems' : 'items'"
                :key="index"
                @click="changTypes(index)"
              >
                {{ t(item) }}
              </view>
            </view>
          </view>
        </up-dropdown-item>
        <up-dropdown-item :title="t(baseData.timeList[baseData.condition[1]])">
          <view class="slot-content">
            <view class="up-text-center up-content-color up-m-t-20 up-m-b-20" style="background: #fff; padding: 0.4rem">
              <view
                v-for="(item, index) in baseData.timeList"
                :class="baseData.condition[1] == index ? 'citems' : 'items'"
                :key="index"
                @click="changTime(index)"
              >
                {{ t(item) }}
              </view>
            </view>
          </view>
        </up-dropdown-item>
      </up-dropdown>
    </view>
    
    <view class="withdrawal-list-section">
      <view class="list-container">
        <up-list @scrolltolower="handleScroll" style="height: 100%">
          <up-list-item v-for="(item, index) in baseData.dataList" :key="index">
            <view class="withdrawal-item">
              <view class="item-icon">
                <view class="icon-circle">
                  <text class="icon-text">💳</text>
                </view>
              </view>
              
              <view class="item-content">
                <view class="withdrawal-info">
                  <view class="amount-section">
                    <text class="currency">{{symbol}}</text>
                    <text class="amount">{{ convertNumbers(item.value,exchangeRate) }}</text>
                  </view>
                  <view class="status-section">
                    <text class="status-label">{{ t('remark') }}:</text>
                    <text class="status-text">{{ getStatusText(item.status) }}</text>
                    <text class="remark-text">({{ translateToEnglish(item.remark) }})</text>
                  </view>
                </view>
                
                <view class="item-details">
                  <view class="detail-row">
                    <text class="detail-time">{{ formatDate(item.CreatedAt) }}</text>
                    <view class="detail-amount">
                      <text class="fee-label">-{{convertNumbers( item.valueFee + item.value,exchangeRate) }}</text>
                      <text class="currency-symbol">{{symbol}}</text>
                    </view>
                  </view>
                </view>
              </view>
              
             <!-- <view class="item-total">
                <text class="total-currency">{{symbol}}</text>
                <text class="total-amount">{{ convertNumbers(item.amount,exchangeRate) }}</text>
              </view> -->
            </view>
          </up-list-item>
          
          <!--  -->
          <view class="bottom-status" v-show="!baseData.loading && baseData.dataList.length > 0">
            <text class="end-text">{{ t('Reached the End') }}...</text>
          </view>
          
          <view class="bottom-status" v-show="baseData.loading">
            <text class="loading-text">{{ t('Loading') }}...</text>
          </view>
          
          <!--  -->
          <view class="empty-state" v-show="baseData.dataList.length === 0 && !baseData.loading">
            <text class="empty-icon">📋</text>
            <text class="empty-text">{{ t('No Data') }}</text>
          </view>
        </up-list>
      </view>
    </view>

    
    <a :href="baseData.aircraftUrl" target="_blank">
      <img class="telegram-fixed-icon" src="@/static/teltgram.png" />
    </a>
  </view>
</template>

<style lang="scss" scoped>
.withdrawal-container {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
}


.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  

  .circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: float 6s ease-in-out infinite;

    &.circle-1 {
      width: 200rpx;
      height: 200rpx;
      top: 10%;
      left: 10%;
      animation-delay: 0s;
    }

    &.circle-2 {
      width: 150rpx;
      height: 150rpx;
      top: 30%;
      right: 20%;
      animation-delay: 2s;
    }

    &.circle-3 {
      width: 100rpx;
      height: 100rpx;
      top: 75%;
      left: 20%;
      animation-delay: 4s;
    }
  }

  .floating-shape {
    position: absolute;
    font-size: 60rpx;
    opacity: 0.3;
    animation: bounce 4s ease-in-out infinite;

    &.shape-1 {
      top: 25%;
      right: 15%;
      animation-delay: 1s;
    }

    &.shape-2 {
      top: 60%;
      left: 15%;
      animation-delay: 3s;
    }

    &.shape-3 {
      top: 80%;
      right: 25%;
      animation-delay: 5s;
    }
  }
}


.conditions {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  background: #fff;
  width: 100%;
  margin-top: 45px;

  .up-text-center {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: space-between;
  }

  .items {
    width: 10.8rem;
    text-align: center;
    margin: 0.2rem;
    background: #f7f7f7;
    padding: 0.4rem 0;
    border-radius: 1.2rem;
    font-size: 0.8rem;
    color: #000;
  }

  .citems {
    width: 10.8rem;
    text-align: center;
    margin: 0.2rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    padding: 0.4rem 0;
    color: #fff;
    border-radius: 1.2rem;
    font-size: 0.8rem;
  }
}

.withdrawal-list-section {
  flex: 1;
  margin: 10px 20rpx;
  position: relative;
  overflow: hidden;
  

  .list-container {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 25rpx;
    padding: 10rpx;
    // min-height: 60vh;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);

    .withdrawal-item {
      display: flex;
      align-items: center;
      padding: 30rpx 20rpx;
      margin-bottom: 15rpx;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 20rpx;
      box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;

      &:active {
        transform: scale(0.98);
      }

      .item-icon {
        margin-right: 25rpx;

        .icon-circle {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          background: linear-gradient(135deg, #667eea, #764ba2);
          display: flex;
          align-items: center;
          justify-content: center;

          .icon-text {
            font-size: 32rpx;
          }
        }
      }

      .item-content {
        flex: 1;

        .withdrawal-info {
          margin-bottom: 20rpx;

          .amount-section {
            display: flex;
            align-items: baseline;
            margin-bottom: 10rpx;

            .currency {
              font-size: 24rpx;
              color: #667eea;
              font-weight: bold;
              margin-right: 5rpx;
            }

            .amount {
              font-size: 32rpx;
              color: #667eea;
              font-weight: bold;
            }
          }

          .status-section {
            font-size: 24rpx;
            color: #666;
            line-height: 1.4;

            .status-label {
              color: #333;
              font-weight: 600;
            }

            .status-text {
              color: #667eea;
              font-weight: 600;
              margin: 0 10rpx;
            }

            .remark-text {
              color: #999;
            }
          }
        }

        .item-details {
          .detail-row {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .detail-time {
              font-size: 24rpx;
              color: #999;
              font-weight: 600;
            }

            .detail-amount {
              display: flex;
              align-items: baseline;

              .fee-label {
                font-size: 24rpx;
                color: #999;
                font-weight: 600;
              }

              .currency-symbol {
                font-size: 20rpx;
                color: #999;
                margin-left: 5rpx;
              }
            }
          }
        }
      }

      .item-total {
        display: flex;
        align-items: baseline;

        .total-currency {
          font-size: 24rpx;
          color: #667eea;
          font-weight: bold;
          margin-right: 5rpx;
        }

        .total-amount {
          font-size: 32rpx;
          color: #667eea;
          font-weight: bold;
        }
      }
    }

    .bottom-status {
      text-align: center;
      padding: 40rpx 0;

      .end-text,
      .loading-text {
        font-size: 26rpx;
        color: #999;
      }
    }

    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 100rpx 0;

      .empty-icon {
        font-size: 120rpx;
        margin-bottom: 30rpx;
        opacity: 0.3;
      }

      .empty-text {
        font-size: 28rpx;
        color: #999;
      }
    }
  }
}




@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
</style>